<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my map</title>
    <!-- 加载官方api -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.15/"></script>
    <style type="text/css">
        html,body
        {
            height: 100%;
            width:100%;
            margin: 0;
            padding: 0;
            background-color: #E2E2E2;
        }
        #headerdiv
        {
            height:8%;
            width:100%;
            border:black;
            background-color: #E2E2E2;
        }
        #mapdiv
        {
            height:92%;
            width:70%;
            padding:0;
            float:left;
        }
        #mapbankdiv
        {
            height:92%;
            width:30%;
            float:left;
            background-color: #f6f5f5;
        }
        body
        {
            background: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script type="text/javascript">
        require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/FeatureLayer",
                "esri/widgets/ScaleBar",
                "esri/widgets/Legend",
                "esri/widgets/Search",
                "esri/widgets/LayerList",
                "esri/widgets/BasemapGallery"
            ],
            function (
                Map,
                MapView,
                FeatureLayer,
                ScaleBar,
                Legend,
                Search,
                LayerList,
                BasemapGallery
            ) {

                var featureLayer = new FeatureLayer({
                    url:
                        "http://www.arcgisonline.cn/server/rest/services/Hosted/CN_34Capital_JDY/FeatureServer",
                    id: "ny-housing",
                    opacity: 0.9
                });

                //加载地图底图
                var map = new Map({
                    basemap: "oceans",
                    layers: [featureLayer]
                });
                //加载视图
                var mapview = new MapView({
                    container: "mapdiv",
                    map: map,
                    zoom: 10,
                    center: [117, 31]
                });

                var layerlist = new LayerList({
                    view: mapview
                });

                var scaleBar = new ScaleBar({
                    view: mapview,
                    style:"ruler",
                    unit: "dual",
                });

                var legend = new Legend({
                    view: mapview,
                    layerInfos: [{
                        layer: featureLayer,
                        title: "Population"
                    }]
                });

                var searchWidget = new Search({
                    view:mapview
                });

                var basemapGallery = new BasemapGallery({
                    view: mapview,
                    container: "mapbankdiv"
                });


                mapview.ui.remove("zoom");
                mapview.ui.add(searchWidget, {
                    position: "top-left",
                    index: 2
                });
                mapview.ui.add(layerlist, "top-left");
                mapview.ui.add(legend, "top-left");
                mapview.ui.add(scaleBar, {
                    position: "bottom-left"
                });
                mapview.ui.add(basemapGallery, {
                    position: "top-center"
                });
            });
    </script>
</head>
<body>
    <div id="headerdiv">
        <h1 align="center" style="color: black">My WebMap</h1>
    </div>
    <div id="mapdiv"></div>
    <div id="mapbankdiv"></div>
</body>
</html>